<template>
  <div
    :id="newOption.id"
    :style="{
      width: '385px',
      height: '160px',
    }"
  ></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, toRefs } from 'vue'

let myChart = null
const props = defineProps({
  dataset: Array,
  newOption: Object,
})

onMounted(() => {
  const { dataset, newOption } = toRefs(props)
  myChart = echarts.init(document.getElementById(newOption.value.id))
  // const dataset =

  // 指定图表的配置项和数据
  const option = {
    grid: {
      x: 0,
      y: 50,
      x2: 80,
      y2: 60,
      top: 52,
      bottom: 25,
      left: 50,
      right: 25,
    },
    dataset: {
      source: dataset.value,
    },
    xAxis: {
      type: 'category',
      name: newOption.value.xAxisName,
      axisLine: { show: true, lineStyle: { color: '#5EC9FA' } },
      axisLabel: {
        show: true,
        interval: 0,

        color: '#5EC9FA', //坐标值得具体的颜色

        fontSize: 10,
      },
    },
    yAxis: {
      name: newOption.value.yAxisName,
      axisLine: {
        show: true,
        lineStyle: { color: '#5EC9FA' },
      },
      axisLabel: {
        color: '#5EC9FA', //坐标值得具体的颜色
      },
      splitLine: {
        show: false,
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#000'],
          opacity: 0.2,
        },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(5,36,102,0.7)', 'rgba(14,47,119,0.7)'],
        },
      },
    },
    barWidth: '30%',
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        type: 'bar',
        label: {
          show: true,
          position: 'top',

          color: '#CFDCFF',
          fontSize: 10,
        },
        itemStyle: {
          color: (params) => {
            var colorList = [
              ['#FFB378', '#FF5353'],
              ['#78A5FF', '#8153FF'],
              ['#75F0C2', '#49CCEF'],
              ['#2CC9FF', '#376CDE'],
              ['#E4CA82', '#FFBD53'],
              ['#FFB378', '#FF5353'],
              ['#78A5FF', '#8153FF'],
              ['#75F0C2', '#49CCEF'],
              ['#2CC9FF', '#376CDE'],
              ['#E4CA82', '#FFBD53'],
              ['#FFB378', '#FF5353'],
              ['#78A5FF', '#8153FF'],
              ['#75F0C2', '#49CCEF'],
              ['#2CC9FF', '#376CDE'],
              ['#E4CA82', '#FFBD53'],
            ]
            if (newOption.value.isColorful) {
              var index = params.dataIndex
              if (params.dataIndex >= colorList.length) {
                index = params.dataIndex - colorList.length
              }
            } else {
              var index = 0
            }
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorList[index][0],
              },
              {
                offset: 1,
                color: colorList[index][1],
              },
            ])
          },
          // normal: {
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     {
          //       offset: 0,
          //       color: '#FF5353',
          //     },
          //     {
          //       offset: 1,
          //       color: '#FFB378',
          //     },
          //   ]),
          // },
        },
      },
    ],
  }
  myChart.setOption(option)
})
</script>
<style lang="postcss" scoped></style>
